import {Input, InputNumber, Modal, Select} from 'antd';
import React, {useCallback} from 'react';
import {useImmerState} from '../hooks/useImmerState';
import '../styles/course.scss';
import ImgUploader from './imgUpload';
import useDidMount from '../hooks/useDidMount';
import {eventBus} from '../helpers/eventBus';
import useGlobal from '../hooks/useGlobal';

const {Option} = Select;
const initialCourse = {
  type: '培训类',
  title: '',
  content: '',
  img: '',
  score: 10,
  memo: ''
};

const CourseEditor = (props) => {
  const {onSubmit} = props;
  const [state, setState] = useImmerState({
    course: initialCourse,
    visible: false,
    type: 'add', // add | edit
    editIndex: 0 // 暂存当前正在编辑的课程的index
  });

  const global = useGlobal();

  const showEditor = useCallback((course) => {
    const {record, index} = course || {};
    setState(draft => {
      draft.type = record ? 'edit' : 'add';
      draft.visible = true;
      draft.course = record || initialCourse;
      draft.editIndex = index || 0;
    });
  }, []);

  useDidMount(() => {
    eventBus.on('newCourse', showEditor);
    eventBus.on('editCourse', showEditor);

    return () => {
      eventBus.off('newCourse', showEditor);
      eventBus.off('editCourse', showEditor);
    };
  });

  return (
    <Modal
      className="course-editor"
      closable
      visible={state.visible}
      title={state.type === 'add' ? '添加课程' : '修改课程'}
      onOk={() => {
        onSubmit(state.type, state.course, state.editIndex);
        setState(draft => {
          draft.visible = false;
        });
      }}
      onCancel={() => setState(draft => {
        draft.visible = false;
      })}
    >
      <div className="item">课程标题：<Input
        placeholder="输入课程标题"
        onChange={e => {
          const val = e.target.value;
          setState(draft => {
            draft.course.title = val;
          });
        }}
        value={state.course.title}/>
      </div>
      <div className="item">课程类型：
        <Select
          value={state.course.type}
          style={{width: 120}}
          onChange={val => setState(draft => {
            draft.course.type = val;
          })}
        >
          {global.state.courseTypeList.map(item =>
            <Option value={item.title} key={item.id}>{item.title}</Option>
          )}
        </Select>
      </div>
      <div className="item">课程描述：<Input.TextArea
        placeholder="输入课程描述"
        onChange={e => {
          const val = e.target.value;
          setState(draft => {
            draft.course.content = val;
          });
        }}
        value={state.course.content}/>
      </div>
      <div className="item">课程封面：<ImgUploader
        onUploaded={(imgUrl) => {
          setState(draft => {
            draft.course.img = imgUrl;
          });
        }}
        logo={state.course.img}/>
      </div>
      <div className="item">所需积分：<InputNumber
        onChange={val => {
          setState(draft => {
            draft.course.score = val;
          });
        }}
        value={state.course.score}/>
      </div>
      <div className="item">积分备注：<Input
        placeholder="请输入积分备注，如：+1000元"
        onChange={e => {
          const val = e.target.value;
          setState(draft => {
            draft.course.memo = val;
          });
        }}
        value={state.course.memo}/>
      </div>
    </Modal>
  );
};

export default CourseEditor;